<template>
    <van-cell>
        <div class="user-info">
            <img :src="comment.avatar">
            <span class="username" v-text="comment.nickname"></span>
            <van-rate v-model="star" readonly size="small"/>
        </div>
        <div class="time">
            {{comment.add_time}} {{comment.sku}}
        </div>
        <div v-text="comment.comment"></div>
    </van-cell>
</template>

<script setup>
  import { defineProps, computed } from 'vue'

  const { comment } = defineProps({
    comment: {
      type: Object,
      require: true,
    }
  })

  const star = computed(() => Number(comment.star))
</script>

<style lang="scss" scoped>
    .user-info {
        display: flex;
        align-items: center;

        img {
            width: 28px;
            height: 28px;
        }

        .username {
            padding: 0 10px 0 6px;
        }
    }

    .time {
        font-size: 12px;
        color: #82848f;
        padding: 5px 0;
    }
</style>
